<script setup lang="ts">
	import { ref } from 'vue';
	import { menuButtonBarStyle } from '../../utils/system';
	const props = defineProps({
		tabs: {
			type: Array,
			required: true
		},
		initTabIndex: {
			type: Number
		},
		customStyle: {
			type: Boolean,
			default: false
		},
	})
	const tabIndex = ref(0)
	tabIndex.value = props.initTabIndex
	const emits = defineEmits(['change'])
	const handleChangeTabIndex = (index: number) => {
		tabIndex.value = index
		emits('change', index)
	}
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n()
</script>
<template>
	<view class="header-container" :style="`${customStyle ? '' : menuButtonBarStyle()}`">
		<slot name="left"></slot>
		<view class="tabs">
			<view v-for="(item,index) in tabs" :key="index" class="tab flex-center" @click="handleChangeTabIndex(index)">
				<text :class="{'text-unselected': tabIndex !== index}">{{t(item as string)}}</text>
				<view class="line" :class="{'tab-selected': tabIndex === index}"></view>
			</view>
		</view>
		<slot name="right"></slot>
	</view>
</template>
<style scoped lang="scss">
	.header-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: #2e355822 solid 1rpx;
		padding: 20rpx 35rpx 7rpx 35rpx;
		background-color: white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		.tabs {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 350rpx;
			.tab {
				width: 80rpx;
				font-size: $font-size-28;
				.line {
					height: 4rpx;
					border-radius: 4rpx;
					width: 40rpx;
					margin-top: 5rpx;
				}
				.tab-selected {
					background-color: $primary-color;
				}
				.text-unselected {
					color: $secondary-text-color;
				}
			}
		}
	}
</style>